<template>
  <div id="create-collection" v-show="showFlag">
    <div class="mask">
      <transition name="create-collection">
        <div class="mini" v-show="showFlag">
          <div class="mini-close">
            <el-button
              class="close-btn"
              plain
              size="small"
              icon="el-icon-close"
              circle
              @click="$emit('close')"
            ></el-button>
          </div>
          <div class="header">编辑合集</div>
          <div class="form-box">
            <div class="tip">合集封面</div>
            <div class="hint">只能上传 jpg/png/gif/svg 文件，且不超过10M</div>
            <div class="upload-cover">
              <el-upload
                action=""
                list-type="picture-card"
                :on-remove="onRemove"
                :on-change="onUploadChange"
                accept=".jpeg,.png,.jpg,.gif,.svg"
                :auto-upload="false"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="col-name">
              <div class="tip">合集名称</div>
              <el-input placeholder="合集名称" v-model="colName"></el-input>
            </div>
            <div class="col-desc">
              <div class="tip">合集描述</div>
              <div class="hint">描述上传合集的详细信息</div>
              <el-input placeholder="合集描述信息" v-model="colInfo"></el-input>
            </div>
            <div class="btn-group">
              <div class="upload" @click="uploadCol">修改</div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { saveImageOnIpfs } from "@/utils/ipfsUtil";
import { updateArray } from "@/api";
export default {
  name: "EditCollection",
  data() {
    return {
      id: "",
      colName: "",
      colInfo: "",
      imgFile: null,
      coverHash: "",
    };
  },
  props: ["showFlag", "arrayDetail"],
  watch: {
    arrayDetail: {
      immediate: true,
      deep: true,
      handler(newValue) {
        console.log(newValue);
        let data = newValue.data[0];
        this.colName = data.title;
        this.colInfo = data.info;
        this.coverHash = data.logo;
        this.id = data.id;
      },
    },
  },

  methods: {
    // 创建合集
    async uploadCol() {
      // 校验
      let { colName, colInfo, imgFile } = this;
      if (colName.trim() == "" || colInfo.trim() == "") {
        this.$message({
          message: "请完成信息填写",
          type: "warning",
          customClass: "el-message-custom",
        });
        return;
      }
      if (imgFile == null) {
        let result = await updateArray({
          id: this.id.toString(),
          title: this.colName,
          logo: this.coverHash,
          info: this.colInfo,
        });
        if (result.flag) {
          this.$message({
            message: result.msg,
            type: "success",
            customClass: "el-message-custom",
          });
          // // 重新获取数据
          // this.$store.dispatch("myArrays", {
          //   pageIndex: "1",
          //   pageSize: "1000",
          // });
          // 关闭模态框
          // this.$store.dispatch("showCreateCollection", false);
          this.$emit("close");
        } else {
          this.$message({
            message: result.msg,
            type: "error",
            customClass: "el-message-custom",
          });
        }
      } else {
        // 校验通过，上传图片到ipfs
        var reader = new FileReader();
        reader.readAsArrayBuffer(this.imgFile);
        reader.onloadend = () => {
          // 保存图片到ipfs，获取图片hash
          saveImageOnIpfs(reader)
            .then(async (hash) => {
              let result = await updateArray({
                id: this.id.toString(),
                title: this.colName,
                logo: hash,
                info: this.colInfo,
              });
              if (result.flag) {
                this.$message({
                  message: result.msg,
                  type: "success",
                  customClass: "el-message-custom",
                });
                // // 重新获取数据
                // this.$store.dispatch("myArrays", {
                //   pageIndex: "1",
                //   pageSize: "1000",
                // });
                // 关闭模态框
                // this.$store.dispatch("showCreateCollection", false);
                this.$emit("close");
              } else {
                this.$message({
                  message: result.msg,
                  type: "error",
                  customClass: "el-message-custom",
                });
              }
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "error",
                customClass: "el-message-custom",
              });
            });
        };
      }
    },

    // 取消选取
    onRemove() {
      this.imgFile = null;
    },

    // 选取图片
    onUploadChange(file) {
      const isIMAGE =
        file.raw.type === "image/jpeg" ||
        file.raw.type === "image/png" ||
        file.raw.type === "image/jpg" ||
        file.raw.type === "image/gif" ||
        file.raw.type === "image/svg";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isIMAGE) {
        this.$message.error("只能上传jpg/png/gif/svg图片!");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return false;
      }

      this.imgFile = file.raw;
    },
  },
};
</script>

<style lang='less'>
// 动画
.create-collection-enter,
.create-collection-leave-to {
  transform: translateY(50vh);
}
.create-collection-enter-active,
.create-collection-leave-active {
  transition: all 0.5s ease;
}
#create-collection {
  .mask {
    backdrop-filter: blur(30px);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .mini {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 420px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 6px rgb(0 0 0 / 10%);
    box-shadow: 0 0 6px rgb(0 0 0 / 10%);
    padding: 25px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    background-position: 0 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 14%;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    .header {
      font-size: 18px;
      color: #505050;
    }
    .mini-close {
      position: absolute;
      right: 15px;
      top: 15px;
      .close-btn:hover {
        color: var(--themeColor1);
        border: var(--themeColor1) 1px solid;
      }
      i {
        font-weight: bold;
      }
    }
    .form-box {
      width: 100%;
      margin-top: 20px;
      .col-name {
        margin-top: 20px;
      }
      .col-desc {
        margin-top: 20px;
      }
      .btn-group {
        margin-top: 20px;
        .upload {
          cursor: pointer;
          background: var(--themeColor1);
          color: #fff;
          padding: 10px 18px;
          border-radius: 99px;
          display: inline-block;
          border: var(--themeColor1) 1px solid;
        }
      }
      .tip {
        font-size: 16px;
        margin-bottom: 5px;
      }
      .hint {
        margin-bottom: 5px;
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>